<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <ms-card title="折线图">
          <ms-line :linedata="linedata" />
        </ms-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <ms-card title="柱状图">
          <ms-line :linedata="bardata" />
        </ms-card>
      </el-col>
      <el-col :span="12">
        <ms-card title="饼图">
          <ms-pie :piedata="piedata" />
        </ms-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { MsPie, MsLine } from '@/common/echarts'
import MsCard from '@/common/card/components'
export default {
  components: {
    'ms-pie': MsPie,
    'ms-line': MsLine,
    'ms-card': MsCard
  },
  data () {
    return {
      piedata: {
        dataMain: ['微信访问', '公众号访问', '扫码进入', '分享进入', '搜索访问'],
        dataValue: [
          {
            value: 335,
            name: '微信访问'
          },
          {
            value: 310,
            name: '公众号访问'
          },
          {
            value: 234,
            name: '扫码进入'
          },
          {
            value: 135,
            name: '分享进入'
          },
          {
            value: 1548,
            name: '搜索访问'
          }
        ],
        title: '饼图示例'
      },
      linedata: {
        dataMain: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
        dataValue: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        title: '折线图示例'
      },
      bardata: {
        dataMain: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
        dataValue: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
        title: '柱状图示例'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .el-row
    margin-bottom 20px
    &:last-child
      margin-bottom 0
  .clearfix:before,
  .clearfix:after
    display table
    content ""
  .clearfix:after
    clear both
    .echarts
      width 100%
      height 100%
</style>
